<!DOCTYPE html>
<html>
<head>
    <title>16通道波形显示器</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .channel-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            padding: 10px;
        }
        .channel-card {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 10px;
            background-color: #f9f9f9;
        }
        canvas {
            width: 100%;
            height: 150px;
        }
    </style>
</head>
<body>
    <h1>16通道实时波形显示</h1>
    <div class="channel-container" id="channels"></div>

    <script>
        // 创建16个通道的图表
        const channelsContainer = document.getElementById('channels');
        const charts = [];
        const colors = [
            '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0',
            '#9966FF', '#FF9F40', '#8AC926', '#1982C4',
            '#6A4C93', '#F15BB5', '#00BBF9', '#00F5D4',
            '#9B5DE5', '#FEE440', '#00F5D4', '#9B5DE5'
        ];

        for (let i = 0; i < 16; i++) {
            const card = document.createElement('div');
            card.className = 'channel-card';
            card.innerHTML = `<h3>通道 ${i}</h3><canvas id="chart-${i}"></canvas>`;
            channelsContainer.appendChild(card);
            
            const ctx = document.getElementById(`chart-${i}`).getContext('2d');
            charts.push(new Chart(ctx, {
                type: 'line',
                data: {
                    labels: Array(1000).fill(''),
                    datasets: [{
                        label: `通道 ${i}`,
                        borderColor: colors[i],
                        backgroundColor: 'rgba(0,0,0,0)',
                        borderWidth: 1,
                        pointRadius: 0,
                        data: Array(1000).fill(0)
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    animation: false,
                    scales: {
                        x: { display: false },
                        y: {
                            min: 0,
                            max: 65535,
                            ticks: { stepSize: 16384 }
                        }
                    }
                }
            }));
        }

        // 实时更新数据
        async function updateData() {
            try {
                const response = await fetch('/data');
                const data = await response.json();
                
                for (let i = 0; i < 16; i++) {
                    charts[i].data.datasets[0].data = data[`ch${i}`];
                    charts[i].update();
                }
            } catch (error) {
                console.error('获取数据失败:', error);
            }
            setTimeout(updateData, 100); // 每100ms更新一次
        }

        // 启动数据更新
        updateData();
    </script>
</body>
</html>